import React from 'react'
import { Form, Input, Select, DatePicker, Switch, Upload, Button, Card, Avatar } from 'antd'
import { UploadOutlined, UserOutlined } from '@ant-design/icons'
import dayjs from 'dayjs'

const { TextArea } = Input
const { Option } = Select

interface FamilyMemberFormProps {
  member?: any
  parent?: any
  onSubmit: (values: any) => void
  onCancel?: () => void
  loading?: boolean
}

export const FamilyMemberForm: React.FC<FamilyMemberFormProps> = ({
  member,
  parent,
  onSubmit,
  onCancel,
  loading,
}) => {
  const [form] = Form.useForm()

  const handleSubmit = (values: any) => {
    // 处理日期字段
    const submitData = {
      ...values,
      birthDate: values.birthDate ? values.birthDate.format('YYYY-MM-DD') : undefined,
      deathDate: values.deathDate ? values.deathDate.format('YYYY-MM-DD') : undefined,
    }
    onSubmit(submitData)
  }

  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e
    }
    return e?.fileList
  }

  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={handleSubmit}
      initialValues={{
        name: member?.name,
        gender: member?.gender || 'MALE',
        birthDate: member?.birthDate ? dayjs(member.birthDate) : undefined,
        deathDate: member?.deathDate ? dayjs(member.deathDate) : undefined,
        isAlive: member?.isAlive !== undefined ? member.isAlive : true,
        bio: member?.bio,
        generation: member?.generation || (parent ? parent.generation + 1 : 1),
      }}
    >
      <div className="flex gap-4">
        <div className="flex-1">
          <Form.Item
            label="姓名"
            name="name"
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input placeholder="请输入成员姓名" />
          </Form.Item>

          <Form.Item
            label="性别"
            name="gender"
            rules={[{ required: true, message: '请选择性别' }]}
          >
            <Select placeholder="请选择性别">
              <Option value="MALE">男性</Option>
              <Option value="FEMALE">女性</Option>
            </Select>
          </Form.Item>

          <div className="grid grid-cols-2 gap-4">
            <Form.Item
              label="出生日期"
              name="birthDate"
            >
              <DatePicker className="w-full" placeholder="选择出生日期" />
            </Form.Item>

            <Form.Item
              label="逝世日期"
              name="deathDate"
            >
              <DatePicker className="w-full" placeholder="选择逝世日期" />
            </Form.Item>
          </div>

          <Form.Item
            label="是否在世"
            name="isAlive"
            valuePropName="checked"
          >
            <Switch checkedChildren="在世" unCheckedChildren="逝世" />
          </Form.Item>

          <Form.Item
            label="代数"
            name="generation"
            rules={[{ required: true, message: '请输入代数' }]}
          >
            <Input type="number" placeholder="请输入代数" />
          </Form.Item>
        </div>

        <div className="w-32">
          <Form.Item
            label="头像"
            name="avatar"
            valuePropName="fileList"
            getValueFromEvent={normFile}
          >
            <Upload
              listType="picture-card"
              maxCount={1}
              beforeUpload={() => false}
            >
              <div>
                <Avatar
                  size={64}
                  icon={<UserOutlined />}
                  className="bg-blue-500 mb-2"
                />
                <div>上传头像</div>
              </div>
            </Upload>
          </Form.Item>
        </div>
      </div>

      <Form.Item
        label="生平简介"
        name="bio"
      >
        <TextArea
          rows={4}
          placeholder="请输入成员生平简介"
          maxLength={500}
          showCount
        />
      </Form.Item>

      {parent && (
        <Form.Item label="父/母信息">
          <Card size="small" className="bg-gray-50">
            <p><strong>父/母：</strong>{parent.name}</p>
            <p><strong>代数：</strong>第{parent.generation}代</p>
          </Card>
        </Form.Item>
      )}

      <Form.Item className="mb-0">
        <div className="flex justify-end gap-2">
          {onCancel && (
            <Button onClick={onCancel}>
              取消
            </Button>
          )}
          <Button type="primary" htmlType="submit" loading={loading}>
            {member ? '更新' : '添加'}成员
          </Button>
        </div>
      </Form.Item>
    </Form>
  )
}

export default FamilyMemberForm